<template>
  <el-dialog
    :title="activeName == 'login' ? '登录' : '注册'"
    :visible="$store.state.loginPanelShow"
    @close="closeDialog"
    width="25%"
  >
    <el-tabs v-model="activeName">
      <el-tab-pane label="登录" name="login">
        <el-form
          :model="loginForm"
          :rules="loginFormRules"
          ref="loginForm"
          :label-position="'right'"
          label-width="80px"
        >
          <el-form-item label="账号" prop="phone">
            <el-input
              prefix-icon="el-icon-mobile-phone"
              v-model="loginForm.phone"
              placeholder="手机"
            ></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input
              prefix-icon="el-icon-lock"
              v-model="loginForm.password"
              placeholder="密码"
              show-password
              clearable
            ></el-input>
          </el-form-item>
        </el-form>
        <div>
          <el-button
            type="primary"
            style="width: 100px; float: right"
            @click="login"
            >登录</el-button
          >
          <el-button type="success" icon="" style="width: 100px; float: left" @click="handleWechatLogin"
            >微信</el-button
          >
        </div>
      </el-tab-pane>
      <el-tab-pane label="注册" name="register">
        <el-form
          :model="registerForm"
          :rules="registerFormRules"
          ref="registerForm"
          :label-position="'right'"
          label-width="80px"
        >
          <el-form-item label="用户昵称" prop="nickname">
            <el-input prefix-icon="el-icon-user-solid"
              v-model="registerForm.nickname"
              placeholder="昵称"
            ></el-input>
          </el-form-item>
          <el-form-item label="手机" prop="phone">
            <el-input prefix-icon="el-icon-mobile-phone"
              v-model="registerForm.phone"
              placeholder="手机"
            ></el-input>
          </el-form-item>
           <el-form-item label="密码" prop="password">
            <el-input prefix-icon="el-icon-lock"
              v-model="registerForm.password"
              placeholder="密码"
              show-password
            ></el-input>
          </el-form-item>
          <el-form-item label="性别" prop="sex">
            <el-select placeholder="请选择性别" v-model="registerForm.sex">
              <el-option key="0" label="男" value="0"></el-option>
              <el-option key="1" label="女" value="1"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="收货地址" prop="city">
            <el-input prefix-icon="el-icon-location"
              v-model="registerForm.city"
              placeholder="请输入收货地址"
            />
          </el-form-item>
         
        </el-form>
        <div>
          <el-button
            type="primary"
            style="width: 100px; float: right"
            @click="register"
            >注册</el-button
          >
        </div>
      </el-tab-pane>
    </el-tabs>
  </el-dialog>
</template>

<script>
import consumerService from "../service/ConsumerService";
import storageService from "../service/StorageService";
import cookie from 'js-cookie'
export default {
  data() {
    const phoneValidator = (role, value, callback) => {
      if (/^1[3456789]\d{9}$/.test(value)) {
        callback();
      } else {
        callback(new Error("手机号码格式不正确!"));
      }
    };
    return {
      activeName: "login",
      loginForm: {
        phone: "",
        password: "",
      },
      loginFormRules: {
        phone: [{ required: true, message: "请输入登录手机号", trigger: "blur" }, { validator: phoneValidator, trigger: "blur" }],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],

      },
      registerForm: {
        nickname: "",
        password: "",
        city: "",
        phone: "",
        sex: "",
      },
      registerFormRules: {
        nickname: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          { min: 3, max: 20, message: "长度在3-20", trigger: "blur" },
        ],
        city: [
          { required: true, message: "请输入收货地址", trigger: "blur" },
          
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          { min: 3, max: 20, message: "长度在3-20", trigger: "blur" },
        ],
        sex: [
          { required: true, message: "请选择性别", trigger: "blur" },
        ],
        phone: [
          { required: true, message: "请输入手机号码", trigger: "blur" },
          { validator: phoneValidator, trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    closeDialog(){
      this.$refs['loginForm'].resetFields(); 
      this.$refs['registerForm'].resetFields();
      this.$store.commit("closeLoginPanel"); 
    },
    handleWechatLogin(){
      window.location.href="http://localhost:8088/api/ucenter/wx/login"
    },
    login() {
      this.$refs.loginForm.validate(async (valid) => {
        if (valid) {
          try {
            const data = await consumerService.login(
              this.loginForm
            );
            // console.log('login---------------')
            // console.log(data)
            storageService.putItem('token',data)
            cookie.set('token', data, { domain: 'localhost' })
            this.$message.success("登录成功");
            // 设置登录状态 用户信息
            this.$store.commit("setUserInfo", data);
            this.$store.commit("setLoginState", true);
            // 关闭弹窗
            this.$store.commit("closeLoginPanel");
              window.location.reload();
          } catch (e) {
           
            this.$message.error(e.message);
          }
          //this.$router.push({path:'/'})
        
        } else {
          this.$message.error("请将信息填写完整");
        }
      });
    },
    register() {
      this.$refs.registerForm.validate(async (valid) => {
        if (valid) {
          try {
            const data = await consumerService.register(this.registerForm);
            //console.log(data)
            this.$message.success(
              '注册账号成功，请登录！'
            );
            // 切换到登录tab栏
            this.activeName = "login";
          } catch (e) {
            this.$message.error(e.message);
          }
        } else {
          this.$message.error("请将信息填写完整");
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
</style>
